import '../styles/middle.scss'
import TargetBox from './targetBox'

const middle = () => {
  // 鼠标滚轮位移
  const wheelEvent = (e) => {
    const moveDistance = 40
    const boxDom = document.querySelector('.middle .box')
    const matrix = document.defaultView.getComputedStyle(boxDom, null).transform
    const matrixArr = matrix && matrix.slice(7, matrix.length - 1).split(', ')
    const transfromY = Number(matrixArr && matrixArr[5])

    const translateY = e.nativeEvent.deltaY <= 0 ? `translateY(${transfromY + moveDistance}px)` : `translateY(${transfromY - moveDistance}px)`
    boxDom.style.transform = translateY
  }

  return <div className="middle" onWheel={(e) => wheelEvent(e)}>
    <div className="main">
      <TargetBox ></TargetBox>
    </div>
  </div>
}

export default middle